<!DOCTYPE html>
<html>
	<head>
		<title>searchField Demo</title>
		<script type="text/javascript" src="jquery.js"></script>
		<script src="jquery.searchField.js" type="text/javascript"></script>
		<script type="text/javascript">
		$(function(){
			// simulae browser autocomplete
			$("#password2").val("secret");
			$('input').searchField();
		});
		</script>
		<style type="text/css">
		.watermark { color: gray; }
		</style>
	</head>
	
	<body>
		<form method="get" action="">
			<h1>searchField Demo</h1>
			<p>
				<label for="plain">Plain Example</label>
				<input id="plain" title="Search This Site" name="search1" />
			</p>
			<p>
				<label for="inital">With Initial Value</label>
				<input id="inital" title="Search Other Site" value="Initial Value" name="search2" />
			</p>
			<p>
				<label for="password">Password Field</label>
				<input id="password" type="password" title="Your password here" name="password" />
			</p>
			<p>
				<label for="password2">Password Field (with value, due to browser complete)</label>
				<input id="password2" type="password" title="Your password here" name="password2" />
			</p>
			<input type="submit"/>
		</form>
	</body>
</html>

